<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <div>
        <q-card class="no-border no-shadow bg-transparent">
          <q-card-section class="q-pa-sm">
            <q-input rounded v-model="search" outlined placeholder="搜索">
              <template v-slot:append>
                <q-icon v-if="search === ''" name="search" />
                <q-icon
                  v-else
                  name="clear"
                  class="cursor-pointer"
                  @click="search = ''"
                />
              </template>
            </q-input>
          </q-card-section>
        </q-card>
      </div>
      <div class="row q-col-gutter-sm">
        <div
          class="col-md-4 col-lg-4 col-sm-12 col-xs-12"
          v-for="(item, item_index) in data"
          :key="item_index"
        >
          <card-product :data="item"></card-product>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import { ref } from 'vue';
import { baseImg } from './data/list';

const data = [
  {
    title: '懵懵懂懂',
    caption: '凡是过往, 皆为序章',
    rating: 2,
    amount: '30',
    img: baseImg,
    chip: '喜欢99',
    chip_color: 'grey-4',
    chip_class: 'text-blue absolute-top-right',
  },
  {
    title: '懵懵懂懂',
    caption: '凡是过往, 皆为序章',
    rating: 2,
    amount: '30',
    img: baseImg,
  },
  {
    title: '懵懵懂懂',
    caption: '凡是过往, 皆为序章',
    rating: 2,
    amount: '30',
    img: baseImg,
    chip: '喜欢99',
    chip_color: 'grey-8',
    chip_class: 'text-white absolute-top-right',
  },
  {
    title: '懵懵懂懂',
    caption: '凡是过往, 皆为序章',
    rating: 2,
    amount: '30',
    img: baseImg,
    chip: '喜欢99',
    chip_color: 'grey-4',
    chip_class: 'text-blue absolute-top-right',
  },
  {
    title: '懵懵懂懂',
    caption: '凡是过往, 皆为序章',
    rating: 2,
    amount: '30',
    img: baseImg,
  },
  {
    title: '懵懵懂懂',
    caption: '凡是过往, 皆为序章',
    rating: 2,
    amount: '30',
    img: baseImg,
  },
];
const CardProduct = defineAsyncComponent(
  () => import('components/cards/CardProduct.vue')
);
const search = ref('');
</script>

<style scoped></style>
